import partyTag from "@/views/society/party/components/partyTag";
import uploadImg from "@/views/society/party/components/uploadImg";
export const modalConfig = ({ handleAction, refrershDrawInfo }: any) => {
  const rules = {
    reject_reason: [
      {
        required: true,
        trigger: ["blur", "change"],
      },
    ],
    background_img: [
      {
        required: true,
        trigger: ["blur", "change"],
        message: $t("party54"),
      },
    ],
    tags: [
      {
        required: true,
        trigger: ["blur", "change"],
        validator: (rule: any, value: string) => {
          if (!value?.length) {
            return Promise.reject($t("party55"));
          }
          return Promise.resolve();
        },
      },
    ],
  };
  const isShowTagSelect = ref(false);
  const toggleTagSelect = () => {
    isShowTagSelect.value = !isShowTagSelect.value;
  };
  const loading = ref(false);
  const handleSubmit = async () => {
    try {
      await defineModal?.modalInstance?.value?.refs?.formValidate?.validate();
      loading.value = true;
      const res: any = await societyApi.party[
        defineModal.formState.type === 1 ? "reviewReject" : "reviewPass"
      ](
        defineModal.formState.type === 1
          ? {
              party_id: defineModal.formState.party_id,
              reject_reason: defineModal.formState.reject_reason,
            }
          : {
              party_id: defineModal.formState.party_id,
              background_img: defineModal.formState.background_img,
              tags: defineModal.formState.tags
                .map((item: any) => item.title)
                .join(","),
            }
      );
      if (res.code != 200) return message.error(res.message);
      message.success($t("base.operationSuccess"));
      defineModal.visible.value = false;
      refrershDrawInfo();
    } catch (error: any) {
      message.error(error.message);
    } finally {
      loading.value = false;
    }
  };
  onMounted(() => {
    watch(
      () => defineModal.formState.tags,
      (val: any) =>
        defineModal?.modalInstance?.value?.refs?.formValidate?.validateFields(
          "tags"
        )
    );
    watch(
      () => defineModal.formState.background_img,
      (val: any) =>
        defineModal?.modalInstance?.value?.refs?.formValidate?.validateFields(
          "background_img"
        )
    );
  });
  const defineModal: any = {
    components: {
      partyTag,
      uploadImg,
    },
    modalInstance: ref(null),
    loading: ref(false),
    visible: ref(false),
    maskClosable: true,
    title: ref(""),
    formState: reactive({
      type: 1, // 1: 拒绝 2: 通过
      party_id: void 0,
      reject_reason: "",
      background_img: "",
      tags: [],
      initiator: {},
    }),
    formConfig: {
      ref: "formValidate",
      autocomplete: "off",
      rules: rules,
      style: {
        width: "100%",
      },
    },
    slot: {
      extra_form_item: () => {
        const { formState } = defineModal;
        return (
          <>
            {formState.type === 1 ? (
              <>
                <a-form-item
                  label={$t("party56")}
                  name="reject_reason"
                  extra={$t("party57")}
                >
                  {withDirectiveInput({
                    vNode: (
                      <a-textarea
                        v-model:value={formState.reject_reason}
                        rows="4"
                        show-count
                        maxlength="20"
                        placeholder={$t("party58")}
                      />
                    ),
                  })}
                </a-form-item>
              </>
            ) : (
              <>
                <a-form-item
                  label={$t("party15")}
                  name="background_img"
                  required="true"
                  labelCol={{
                    span: 6,
                  }}
                >
                  <uploadImg
                    v-model={formState.background_img}
                    help={$t("party59")}
                  />
                </a-form-item>
                <a-form-item
                  label={$t("party28")}
                  name="tags"
                  required="true"
                  labelCol={{
                    span: 6,
                  }}
                >
                  <div style="display: flex;justify-content: space-between;gap: 10px;">
                    <partyTag
                      v-model={formState.tags}
                      isEdit={true}
                      userId={formState.initiator.uid}
                      v-model:isShowTagSelect={isShowTagSelect.value}
                    />
                    <a-button
                      size="small"
                      onClick={toggleTagSelect}
                      style="font-size: 12px"
                    >
                      {$t("base.markLabel")}
                    </a-button>
                  </div>
                </a-form-item>
              </>
            )}
            <div style="width: 100%;display: flex;gap: 20px;justify-content: center;margin: 16px 0 0;">
              <a-button onClick={() => (defineModal.visible.value = false)}>
                {$t("base.cancel")}
              </a-button>
              <a-button
                type="primary"
                onClick={handleSubmit}
                loading={loading.value}
              >
                {$t("base.ok")}
              </a-button>
            </div>
          </>
        );
      },
      formSlot: {
        footer: true,
      },
    },
  };
  return defineModal;
};
